<template>
  <div id="map"></div>
  <div class="titleContainer center">
    <span>vue+leaflet示例:geojson数据地形剖面分析</span>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import L from "leaflet";
import "../../public/lib/leaflet.elevation-0.0.4.src";
import config from "../config";
import { useRouter } from "vue-router";
const router = useRouter();
let map = null;
onMounted(() => {
  initMap();
});
const initMap = () => {
  // 创建地图对象
  map = L.map("map", {
    attributionControl: false,
  });
  //创建底图切换数据源
  const tileLayer = L.tileLayer(config.baseMaps[0].Url); //OSM街道图
  //地形高程点dem模拟数据geojson
  const geojson = {
    name: "NewFeatureType",
    type: "FeatureCollection",
    features: [
      {
        type: "Feature",
        geometry: {
          type: "LineString",
          coordinates: [
            [169.13693, -44.696476, 296],
            [169.134602, -44.69764, 295],
            [169.129983, -44.701164, 299],
            [169.131292, -44.702382, 303],
            [169.13376, -44.704533, 315],
            [169.135568, -44.705574, 336],
            [169.136179, -44.70934, 338],
            [169.137011, -44.714066, 344],
            [169.136984, -44.719489, 342],
            [169.136898, -44.725235, 350],
            [169.136801, -44.730143, 353],
            [169.135632, -44.734853, 354],
            [169.131882, -44.738989, 363],
            [169.129688, -44.744241, 363],
            [169.123937, -44.746982, 361],
            [169.118509, -44.750286, 371],
            [169.112763, -44.753113, 374],
            [169.107807, -44.755356, 378],
            [169.103467, -44.758086, 386],
            [169.098902, -44.760956, 388],
            [169.096429, -44.764642, 397],
            [169.094197, -44.768246, 401],
            [169.091955, -44.773037, 402],
            [169.089251, -44.777194, 408],
            [169.086215, -44.780939, 410],
            [169.083227, -44.785498, 412],
            [169.079778, -44.788926, 423],
            [169.076913, -44.7923, 429],
            [169.074059, -44.795938, 429],
            [169.071495, -44.800213, 435],
            [169.069505, -44.804263, 442],
            [169.067574, -44.809322, 436],
            [169.065508, -44.812728, 450],
            [169.063277, -44.817299, 451],
            [169.062, -44.822073, 447],
            [169.06023, -44.826622, 464],
            [169.058905, -44.831729, 459],
            [169.05553, -44.835645, 460],
            [169.051888, -44.83933, 467],
            [169.048626, -44.842817, 476],
            [169.045467, -44.846106, 480],
            [169.042028, -44.849287, 485],
            [169.037672, -44.851776, 493],
            [169.033477, -44.854367, 495],
            [169.029974, -44.856373, 502],
            [169.027324, -44.857559, 514],
            [169.023832, -44.859275, 518],
            [169.020587, -44.861743, 524],
            [169.017615, -44.864414, 526],
            [169.015748, -44.868888, 520],
            [169.013119, -44.872059, 529],
            [169.009879, -44.874521, 536],
            [169.00798, -44.87598, 553],
            [169.005073, -44.878158, 556],
            [169.00452, -44.878609, 557],
            [169.004488, -44.878619, 554],
            [169.004477, -44.878619, 553],
            [169.004483, -44.878619, 552],
            [169.004477, -44.878619, 551],
            [169.004477, -44.878619, 550],
            [169.004477, -44.878619, 551],
            [169.004483, -44.878614, 551],
            [169.004488, -44.878614, 551],
            [169.004488, -44.878614, 552],
            [169.004558, -44.878598, 556],
            [169.004011, -44.880808, 556],
            [169.002584, -44.884032, 570],
            [169.001033, -44.886172, 583],
            [168.999703, -44.887546, 600],
            [168.998732, -44.889235, 606],
            [168.996801, -44.890893, 609],
            [168.992279, -44.893452, 608],
            [168.988915, -44.895941, 613],
            [168.987783, -44.899117, 616],
            [168.985283, -44.901563, 625],
            [168.9834, -44.904835, 629],
            [168.981164, -44.90755, 639],
            [168.978138, -44.910441, 647],
            [168.976008, -44.913166, 649],
            [168.973165, -44.915371, 656],
            [168.973358, -44.918332, 657],
            [168.971502, -44.921905, 670],
            [168.971454, -44.925504, 676],
            [168.970628, -44.929104, 687],
            [168.969887, -44.931856, 701],
            [168.969448, -44.934672, 710],
            [168.968155, -44.938567, 713],
            [168.967575, -44.939463, 731],
            [168.963912, -44.941855, 726],
            [168.962141, -44.944918, 738],
            [168.960376, -44.948287, 746],
            [168.959813, -44.951527, 757],
            [168.956793, -44.954156, 766],
            [168.957008, -44.957117, 782],
            [168.957351, -44.960684, 791],
            [168.959025, -44.963624, 805],
            [168.958794, -44.966269, 815],
            [168.957614, -44.968683, 832],
            [168.957571, -44.968801, 833],
            [168.955221, -44.971097, 839],
            [168.953274, -44.972958, 863],
            [168.949771, -44.974363, 877],
            [168.946869, -44.975699, 888],
            [168.944911, -44.977614, 911],
            [168.944825, -44.978489, 928],
            [168.943709, -44.979846, 951],
            [168.942373, -44.980634, 964],
            [168.942277, -44.982217, 978],
            [168.942153, -44.98329, 993],
            [168.941799, -44.984363, 1002],
            [168.941145, -44.985479, 1021],
            [168.94115, -44.986535, 1037],
            [168.940818, -44.987656, 1054],
            [168.940104, -44.98889, 1064],
            [168.939959, -44.990816, 1082],
            [168.938634, -44.992345, 1093],
            [168.938618, -44.992361, 1087],
            [168.938608, -44.992361, 1088],
            [168.938608, -44.992356, 1090],
            [168.938608, -44.992345, 1091],
            [168.938602, -44.992345, 1091],
            [168.938608, -44.99235, 1090],
            [168.938608, -44.992345, 1090],
            [168.938742, -44.992179, 1085],
            [168.920138, -44.995102, 931],
            [168.908068, -44.99175, 765],
            [168.903127, -44.985961, 734],
            [168.903149, -44.985945, 740],
            [168.903143, -44.98594, 741],
            [168.903224, -44.985666, 739],
            [168.899914, -44.981938, 735],
            [168.892221, -44.976783, 722],
            [168.876933, -44.976574, 638],
            [168.869138, -44.976069, 643],
            [168.865807, -44.975469, 636],
            [168.864428, -44.975587, 609],
            [168.860834, -44.977625, 500],
            [168.85555, -44.981305, 397],
            [168.853887, -44.978537, 385],
            [168.84899, -44.976853, 391],
            [168.848882, -44.972261, 393],
            [168.850347, -44.96791, 399],
            [168.851135, -44.962733, 396],
            [168.848512, -44.959386, 407],
            [168.845739, -44.956039, 408],
            [168.843641, -44.952756, 413],
            [168.841109, -44.948915, 420],
            [168.840503, -44.947439, 422],
            [168.839752, -44.944929, 418],
            [168.835986, -44.939516, 415],
            [168.833127, -44.938626, 415],
            [168.832639, -44.938856, 421],
            [168.832628, -44.93884, 423],
            [168.832639, -44.938835, 425],
            [168.832639, -44.93883, 424],
            [168.832644, -44.938819, 424],
            [168.832644, -44.938813, 424],
            [168.832644, -44.938808, 424],
            [168.832644, -44.938797, 424],
            [168.832644, -44.938792, 424],
            [168.832655, -44.938808, 424],
            [168.83265, -44.938797, 424],
            [168.832655, -44.938803, 424],
            [168.83265, -44.938803, 424],
            [168.83265, -44.938797, 424],
            [168.83265, -44.938803, 424],
            [168.83265, -44.938797, 425],
            [168.833336, -44.93832, 414],
            [168.833132, -44.93854, 409],
            [168.834484, -44.938481, 414],
            [168.834554, -44.93847, 414],
            [168.83457, -44.938513, 420],
            [168.834473, -44.938449, 420],
            [168.834479, -44.938449, 419],
            [168.83449, -44.938454, 419],
            [168.834495, -44.938459, 418],
            [168.834495, -44.938465, 417],
            [168.834495, -44.938459, 417],
          ],
        },
        properties: null,
      },
    ],
  };
  //创建地形剖面分析地图控件
  const el = L.control.elevation({
    collapsed: false, //默认false,是否收缩剖面分析图表控件
    theme: "lime-theme", //default: lime-theme steelblue-theme purple-theme 剖面图表控件主题
  });
  el.addTo(map);
  L.geoJson(geojson, {
    onEachFeature: el.addData.bind(el),
  }).addTo(map);
  //定义地图初始化范围
  const bounds = new L.LatLngBounds(
    new L.LatLng(-44.6, 170),
    new L.LatLng(-45, 168)
  );
  map.addLayer(tileLayer).fitBounds(bounds);
};
</script>

<style>
#map {
  width: 100vw;
  height: 100vh;
}
.titleContainer {
  position: absolute;
  top: 0;
  background: rgba(0, 0, 0, 0.85);
  height: 50px;
  width: 100vw;
  z-index: 999;
  font-size: 14px;
  color: #fff;
  font-size: 28px;
}
.center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.leaflet-top {
  top: 60px;
}
</style>
